<template>
  <div class="carManage">
    <div class="mainPage" v-if='!isAdd'>
      <div class="search">
        <el-form :inline="true" :model="wastes" class="demo-form-inline companyAdd">
          <el-form-item label="危废名称">
            <el-input v-model="wastes.wasteName" placeholder="危废名称"></el-input>
          </el-form-item>
          <el-form-item label="危废类别">
            <el-input v-model="wastes.wasteType" placeholder="危废类别"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="default" @click="resetSeachConditions">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type='primary' class='addBtn' @click='addCar'>新增</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="tableData">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop='name' label="危废名称">
          </el-table-column>
          <el-table-column prop='rootType' label="危废类别">
          </el-table-column>
          <el-table-column prop='dangerousType' label="危废代码">
          </el-table-column>
          <el-table-column prop='characteristic' label="危废特性">
          </el-table-column>
          <el-table-column prop='emergencyMeasure' label="禁忌与应急措施">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click='wasteUpdate(scope.row)'>修改</el-button>
              <el-button type="text" size="small" @click='wasteDelet(scope.row.id)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="carAdd" v-if='isAdd'>
      <el-button type='private' size='small' @click='goBack'>返回</el-button>
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="危废名称" prop="wasteName">
          <el-input v-model="addForm.wasteName"></el-input>
        </el-form-item>
        <el-form-item label='所属行业' prop='industrys'>
          <el-select v-model='addForm.industrys'>
            <el-option :label='item.name' :value='item.id' v-for='item in industryList' :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='危废类别' prop='wasteType'>
          <el-input v-model="addForm.wasteType"></el-input>
        </el-form-item>
        <el-form-item label='危废代码' prop='wasteCode'>
          <el-input v-model="addForm.wasteCode"></el-input>
        </el-form-item>
        <!-- <el-form-item label="危险废物" prop="dangerousType">
          <el-input v-model="addForm.dangerousType"></el-input>
        </el-form-item> -->
        <el-form-item label="危废特性" prop="wasteSpecial">
          <el-input v-model="addForm.wasteSpecial"></el-input>
        </el-form-item>
        <el-form-item label="形态" prop="wasteForm">
          <el-input v-model="addForm.wasteForm"></el-input>
        </el-form-item>
        <el-form-item label="包装方式" prop="packageType">
          <el-input v-model="addForm.packageType"></el-input>
        </el-form-item>
        <el-form-item label="禁忌与应急措施" prop="measure">
          <el-input type="textarea" v-model="addForm.measure"></el-input>
        </el-form-item>
        <el-form-item label='外运目的' prop='purpose'>
          <el-checkbox-group v-model="addForm.purpose" @change='getArr'>
            <!-- <el-checkbox value="1" lable='中转贮存'></el-checkbox>
            <el-checkbox value="2" lable='利用'></el-checkbox>
            <el-checkbox value="3" lable='焚烧'></el-checkbox>
            <el-checkbox value="4" lable='安全填埋'></el-checkbox>
            <el-checkbox value="5" lable='其他'></el-checkbox> -->
            <el-checkbox label="中转贮存" name="type"></el-checkbox>
            <el-checkbox label="利用" name="type"></el-checkbox>
            <el-checkbox label="焚烧" name="type"></el-checkbox>
            <el-checkbox label="安全填埋" name="type"></el-checkbox>
            <el-checkbox label="其他" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button @click='onSubmit("addForm")' type='primary'>确定</el-button>
          <el-button @click='cancleUpdate'>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [],
      wastes: {
        wasteName: '',
        wasteType: ''
      },
      addForm: {
        wasteName: '',
        industrys: '',
        wasteType: '',
        wasteCode: '',
        dangerousType: '',
        wasteSpecial: '',
        wasteForm: '',
        packageType: '',
        measure: '',
        purpose: [],
        id: ''
      },
      rules: {
        wasteName: [{
          required: true,
          message: '请填写危废名称',
          triggle: 'blur'
        }],
        industrys: [{
          type: 'number',
          required: true,
          message: '请选择行业类型',
          triggle: 'change'
        }],
        wasteType: [{
          required: true,
          message: '请危废类别',
          triggle: 'change'
        }],
        wasteCode: [{
          required: true,
          message: '请填写危废代码',
          triggle: 'blur'
        }],
        dangerousType: [{
          required: true,
          message: '请填写危险废物',
          triggle: 'blur'
        }],
        wasteSpecial: [{
          required: true,
          message: '请填写危废特性',
          triggle: 'blur'
        }],
        wasteForm: [{
          required: true,
          message: '请填写危废形态',
          triggle: 'blur'
        }],
        packageType: [{
          required: true,
          message: '请包装方式',
          triggle: 'blur'
        }],
        measure: [{
          required: true,
          message: '请填写禁忌与措施',
          triggle: 'blur'
        }],
        purpose: [{
          type: 'array',
          required: true,
          message: '请选择外运目的',
          triggle: 'change'
        }],

      },
      isAdd: false,
      currentPage: 1,
      total: 0,
      wasteTypeList: [],
      industryList: [],
      isUpdate: false

    }
  },
  created() {
    this.initList()
  },
  mounted() {
    // 获取所有行业
    this.$common.$ajax('/sys/industry/list', {}, 'get').then(res => {
      console.log(res.data.body);
      this.industryList = res.data.body
    })
  },
  methods: {
    getArr(val) {
      console.log(val)
    },
    initList() {
      this.$common.$ajax('/wf/wastetype/list', {
        page: this.page,
        limit: this.limit,
        wasteName: this.wastes.wasteName,
        wasteType: this.wastes.wasteType

      }, 'get').then(res => {
        this.tableData = res.data.body.list;
        this.total = res.data.body.totalCount;
      })
    },
    getCarType() {

    },
    addCar() {
      this.isAdd = true;
      this.isUpdate = false;
      // 获取危废类型
      this.$common.$ajax('/wf/wastetype/wastetype', {}, 'get').then(res => {
        console.log(res.data.body)
        this.wasteTypeList = res.data.body
      })



    },
    onSearch() {
      console.log(this.wastes)
      this.initList()
    },
    resetSeachConditions() {
      this.wastes.wasteName = '';
      this.wastes.wasteType = '';
      this.initList()
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            console.log(this.addForm.purpose)
            var arr = []
            this.addForm.purpose.forEach(item => {
              if (item == '中转贮存') {
                arr.push(1)
              } else if (item == '利用') {
                arr.push(2)
              } else if (item == '焚烧') {
                arr.push(3)
              } else if (item == '安全填埋') {
                arr.push(4)
              } else {
                arr.push(5)
              }
            })
            this.$common.$ajax('/wf/wastetype/update', {
              id: this.addForm.id,
              name: this.addForm.wasteName,
              industryId: this.addForm.industrys,
              rootType: this.addForm.wasteType,
              dangerousType: this.addForm.wasteCode,
              characteristic: this.addForm.wasteSpecial,
              form: this.addForm.wasteForm,
              packingMethod: this.addForm.packageType,
              emergencyMeasure: this.addForm.measure,
              objective: arr.join()
            }, 'post').then(res => {
              this.$message({
                type: 'success',
                message: "修改成功"
              })
              this.reload()
            })
          } else {
            var arr = [];
            //  <el-checkbox label="中转贮存" name="type"></el-checkbox>
            // <el-checkbox label="利用" name="type"></el-checkbox>
            // <el-checkbox label="焚烧" name="type"></el-checkbox>
            // <el-checkbox label="安全填埋" name="type"></el-checkbox>
            // <el-checkbox label="其他" name="type"></el-checkbox>
            this.addForm.purpose.forEach(item => {
              if (item == '中转贮存') {
                arr.push(1)
              } else if (item == '利用') {
                arr.push(2)
              } else if (item == '焚烧') {
                arr.push(3)
              } else if (item == '安全填埋') {
                arr.push(4)
              } else {
                arr.push(5)
              }
            })
            this.$common.$ajax('/wf/wastetype/save', {

              name: this.addForm.wasteName,
              industryId: this.addForm.industrys,
              rootType: this.addForm.wasteType,
              dangerousType: this.addForm.wasteCode,
              characteristic: this.addForm.wasteSpecial,
              form: this.addForm.wasteForm,
              packingMethod: this.addForm.packageType,
              emergencyMeasure: this.addForm.measure,
              objective: arr.join()
            }, 'post').then(res => {
              console.log(res.data)
              this.$message({
                type: 'success',
                message: '新增成功'
              })
            })
          }
        } else {
          console.log('error')
        }
      })
    },
    // 删除
    wasteDelet(id) {
      this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$common.$ajax('/wf/wastetype/delete', { wasteTypeId: id }, 'get').then(res => {
            if (res.data.status === 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

    },
    wasteUpdate(row) {
      console.log(row)
      this.isAdd = true;
      this.isUpdate = true;
      // 赋值
      this.addForm.id = row.id
      this.addForm.wasteName = row.name;
      this.addForm.industrys = row.industryId;
      this.addForm.wasteType = row.rootType;
      this.addForm.wasteCode = row.dangerousType;
      // this.addForm.dangerousType = row.
      this.addForm.wasteSpecial = row.characteristic;
      this.addForm.wasteForm = row.form;
      this.addForm.packageType = row.packingMethod;
      this.addForm.measure = row.emergencyMeasure;
      // <el-checkbox value="1">中转贮存</el-checkbox>
      //       <el-checkbox value="2">利用</el-checkbox>
      //       <el-checkbox value="3">焚烧</el-checkbox>
      //       <el-checkbox value="4">安全填埋</el-checkbox>
      //       <el-checkbox value="5">其他</el-checkbox>
      var arr = [];
      row.objective.split(',').forEach(item => {
        if (item == 1) {
          arr.push('中转贮存')
        } else if (item == 2) {
          arr.push('利用')
        } else if (item == 3) {
          arr.push('焚烧')
        } else if (item == 4) {
          arr.push('安全填埋')
        } else {
          arr.push('其他')
        }
      })
      this.addForm.purpose = arr

    },
    cancleUpdate() {
      this.reload()
    },
    goBack() {
      this.reload()
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initList()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initList()
    }
  }
}

</script>
<style lang="scss" scoped>
.carManage {
  .search {
    display: flex;
    justify-content: space-between;

    .addBtn {
      height: 40px;
    }
  }
}

.demo-ruleForm {
  width: 50%;
  margin: 0 auto;
}

</style>
